<template>
	<view class="i-lifeSwiper_item" @click="toDetail(data.storeId)" :class="{tj: data.isRecommend === '0'}">
		<view class="item_left">
			<view class="image">
				<image :src="data.doorPhotoUrl"></image>
			</view>
		</view>
		<view class="item_right">
			<view class="right_title">
				<text class="title">{{data.storeName}}</text>
				<image src="../../static/images/tj_icon.png" v-if="data.isRecommend === '0'"></image>
			</view>
			<view v-if="data.storeState === '1'" class="item_times">
				<text>休息中 {{data.openTimeStart}}-{{data.openTimeEnd}}</text>
			</view>

			<view class="right_rate" v-if="data.star || data.saleNum">
				<i-rate :oneStart="false" :rate="data.star" v-if="data.star"></i-rate>
				<text :style="{marginLeft: data.star ? '20rpx' : 0}">销量 {{data.saleNum}}</text>
			</view>
			<view class="right_bot">
				<view class="lefff">{{data.address}}</view>
				<view class="r_b" @click.stop="handleMap">
					<image src="../../static/images/navigation_icon.png" mode=""></image>
					<text>{{data.distance}}km</text>
				</view>
			</view>
			<!-- <view class="tag_item" v-if="data.hotGoods">
				<view class="tag_item_left">
					<image src="../../static/images/hui_icon.png" mode=""></image>
					<text>{{data.hotGoods?.serviceName}}</text>
				</view>
				<view class="tag_item_r">
					<text>￥{{data.hotGoods?.price}}</text>
					<i-price :size="22">{{data.hotGoods?.discountPrice}}</i-price>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
	} from '../../utils/common'
	import _ from 'lodash'
	import {
		ref,
		defineEmits,
		defineProps
	} from 'vue';
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {
					storeId: '',
					storeName: ''
				}
			}
		},
		activeCode: {
			type: String,
			default: ''
		}
	})

	const emit = defineEmits(['click'])


	const detail = (storeId : string) => {
		let activeCode = props.activeCode
		if(props.activeCode === '-1'){
			activeCode = '10003201'
		}
		navTo(`/pages/views/store_detail?id=${storeId}&activeCode=${activeCode}`, 'navigateTo')
	}

	const toDetail = _.debounce(detail, 500, {
		leading: true,
		trailing: false
	})
	const handleMap = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.i-lifeSwiper_item {
		width: calc(100% - 68rpx);
		margin: 0 auto;
		background-color: #fff;
		border-radius: 24rpx;
		@include flexR;
		align-items: flex-start;
		margin-bottom: 20rpx;
		padding-bottom: 32rpx;

		.item_left {
			margin-top: 32rpx;
			margin-left: 32rpx;
			margin-right: 24rpx;
			position: relative;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				background-color: #E6E6F0;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
			}

		}

		.item_right {
			@include flexC;
			margin-right: 32rpx;
			margin-top: 32rpx;
			width: 70%;

			.item_times {
				width: 242rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background: #8E8E93;
				border-radius: 4rpx;
				@include dfont(24rpx);
				color: #fff;
				margin-bottom: 8rpx;
			}

			.right_title {
				@include flexRS;
				@include dfont(32rpx);
				font-weight: bold;
				color: $dfontColor;
				margin-bottom: 8rpx;
				@include overflow;

				image {
					width: 64rpx;
					height: 36rpx;

				}

				.title {
					width: 100%;
					@include overflow;
				}
			}

			.right_rate {
				@include flexR;

				text {
					@include dfont(24rpx);
					color: #8E8E93;
				}
			}

			.right_bot {
				@include flexRS;
				@include dfont(24rpx);
				color: #8E8E93;
				width: 44vw;
				margin-top: 8rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				.lefff {
					@include overflow;
					width: 64%;
				}

				.r_b {
					@include flexR;
					color: #8E8E93;
				}
			}

			.tag_item {
				width: 100%;
				height: 64rpx;
				background: linear-gradient(270deg, #F7F7F7 0%, rgba(245, 245, 245, 0) 100%);
				border-radius: 16rpx;
				@include flexRS;
				margin-top: 32rpx;

				.tag_item_left {
					@include flexR;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}

					text {
						@include dfont(24rpx);
						color: #2C2C2E;
					}
				}

				.tag_item_r {
					@include flexR;
					margin-right: 24rpx;

					text {
						@include dfont(24rpx);
						color: #8E8E93;
						margin-right: 18rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.tj {
		background: #FFFFFF linear-gradient(180deg, rgba(251, 101, 46, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
		border: 4rpx solid #FB652E;
	}
</style>